<script lang="ts" setup>
import TypeDistribution from '../options/type-distribution'
import {deviceType} from '@/api/visualization'

interface itemType {
    device_type: string,
    value: number
}

let color = ['#4374ff', '#2ce293', '#17caf0']
const res = await deviceType()
let data = res.data.map((item: itemType, index: number) => {
    return {itemType: {color: color[index]}, value: item.value, name: item.device_type}
})

const option = $ref(TypeDistribution(data))
</script>

<template>
    <div h-51 w-96 flex="~ col" bg="[url(@/assets/image/border/TypeDistributionBorder.png)] no-repeat center cover">
        <div p="x-8 t-4" text="#17caf0 5.5" font="bold">终端类型分布</div>
        <div w="full" h="full">
            <EchartsContainer :option="(option)"/>
        </div>
    </div>
</template> 
